<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ceshi数据表格-静态表格转换方便seo优化</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">


    <!-- 下面是造模板 -->
    <script type="text/html" id="barDemo080">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

        <!-- 这里同样支持 laytpl 语法，如：当积分大于80的时候出现审核    {{# }}是存放JavaScript语法的
        d.experience  指的是  当前列的积分
        -->
        {{#               if(d.experience > 80){                }}
                                <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
        {{#               }                              }}
    </script>


</head>
<body>
    <!-- 这种方式自己可以用ajax获取数据后插入 tbody -->
    <table lay-filter="demo009" >
        <thead>
        <tr>
            <th lay-data="{field:'username', width:100}">昵称</th>
            <th lay-data="{field:'experience',width:80,sort:true,event:'积分列点击事件'}">积分</th>
            <!-- ,edit:'text' 指的是该列可以进行编辑 -->
            <th lay-data="{field:'sign',edit:'text'}">签名</th>
            <!-- #barDemo080是绑定上面造的模板 -->
            <th lay-data="{toolbar:'#barDemo080'}">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>贤心1</td>
            <td>66</td>
            <td>人生就像是一场修行a</td>
        </tr>
        <tr>
            <td>贤心2</td>
            <td>88</td>
            <td>人生就像是一场修行b</td>
        </tr>
        <tr>
            <td>贤心3</td>
            <td>33</td>
            <td>人生就像是一场修行c</td>
        </tr>
        </tbody>
    </table>









    <script src="../zujian/layui/layui.all.js"></script>
    <script type="text/javascript">

            let table = layui.table;
            //转换静态表格
            table.init('demo009', {
                //该大括号内设置基础参数
                height: 345 //设置高度
                ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                //支持所有基础参数
                //渲染完成后调用
                ,done:function (obj) {
                    layer.msg('渲染完成',{time:100000,closeBtn:true,offset: ['100px', '250px']});
                }
                //开启表格头部工具栏区域，该参数支持四种类型值：
                //toolbar: '#toolbarDemo' //指向自定义工具栏模板选择器
                //         toolbar: '<div>xxx</div>' //直接传入工具栏模板字符
                //         toolbar: true //仅开启工具栏，不显示左侧模板
                //         toolbar: 'default' //让工具栏左侧显示默认的内置模板
                //         注意：
                // 1. 该参数为 layui 2.4.0 开始新增。
                // 2. 若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数
                ,toolbar:'default'//开启表格头部工具栏
                //下面要开启必须使用上面一行
                ,defaultToolbar: [
                    'filter'//过滤显示那个字段
                    , 'print'//打印数据
                    , 'exports'//导出数据到excel或者cvs
                    , {
                        //上面是内置工具,下面是自定义一个工具到工具栏
                        title: '提示' //标题
                        ,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                        ,icon: 'layui-icon-tips' //图标类名
                        // ,icon:'layui-icon-star-fill'
                    }]
            });
            // 自定义单元格点击事件名，以便在 tool 事件中完成对该单元格的业务处理
            table.on('tool(demo009)', function(obj){
                if(obj.event==='积分列点击事件'){
                    layer.tips('积分列点击事件: '+JSON.stringify(obj.data),this,{tips: [2,'#99950f'],time:10000,closeBtn:true})
                }
            })

            table.on('edit(demo009)', function(obj){ //注：edit是固定事件名，demo009是table原始容器的属性 lay-filter="对应的值"
                //监听单元格编辑可以直接把编辑过的发送到后台,然后操作数据库
                console.log(obj.value); //得到修改后的值
                console.log(obj.field); //当前编辑的字段名
                console.log(obj.data); //所在行的所有相关数据//编辑后的该行数据
                alert(JSON.stringify(obj.data));
            });

            //监听工具条
            table.on('tool(demo009)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if(layEvent === 'detail'){ //查看
                    layer.tips('积分列点击事件: '+JSON.stringify(obj.data),this,{tips: [2,'#99950f'],time:10000,closeBtn:true});
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //do something

                    //同步更新缓存对应的值
                    obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });
                }else if(layEvent==='check'){
                    layer.tips('审核: '+JSON.stringify(obj.data),this,{tips: [2,'#99950f'],time:10000,closeBtn:true});
                } else{
                    layer.tips('没有对应事件',this,{tips: [2,'#99950f'],time:10000,closeBtn:true});
                }
            });





            //监听toolbar事件,就是监听工具栏事件
            table.on('toolbar(demo009)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'add':
                        layer.msg('添加');
                        break;
                    case 'delete':
                        layer.msg('删除');
                        break;
                    case 'update':
                        layer.msg('编辑');
                        break;
                    case 'LAYTABLE_TIPS':
                        layer.msg('自定义toolbar事件！')
                        break;
                }
            });
    </script>
</body>
</html>